@import "base.less";

// global colors
@esui-type-body-text-color: #444;
@esui-type-body-background: #FFF;
@esui-type-body-font-family: 'Helvetica Neue', Helvetica, Arial, '宋体', SimSun, sans-serif;
@esui-type-body-line-height: 1.3;
@esui-type-body-font-weight: normal;

// link
@esui-type-link-color: #6CCDC0;
@esui-type-link-text-decoration: none;
@esui-type-link-hover-color: lighten(#6CCDC0, 15%);
@esui-type-link-hover-text-decoration: underline;

@esui-type-link-contrast-color: #FFF;
@esui-type-link-contrast-hover-color: #FFF;

// code element
@esui-type-code-font-family: Monaco, Consolas, monospace;
@esui-type-code-text-color: #444;
@esui-type-code-border-color: #ddd;
@esui-type-code-background-color: #EFF0F2;
@esui-type-code-padding: 0 0.3em;
@esui-type-code-border-radius: 0;

// headings
@esui-type-headings-font-family: 'Helvetica Neue', Helvetica, Arial, '微软雅黑', 'Microsoft YaHei', '黑体', SimHei, sans-serif;
@esui-type-headings-font-weight: bold;
@esui-type-headings-color: #444;
@esui-type-headings-small-color: #999;
@esui-type-headings-margin: 0.67em 0;

@esui-type-h1-font-size: @esui-xxxx-large-font-size;
@esui-type-h1-line-height: 1.2;
@esui-type-h2-font-size: @esui-xxx-large-font-size;
@esui-type-h2-line-height: 1.2;
@esui-type-h3-font-size: @esui-large-font-size;
@esui-type-h3-line-height: 1.2;
@esui-type-h4-font-size: @esui-medium-font-size;
@esui-type-h4-line-height: 1.2;
@esui-type-h5-font-size: @esui-small-font-size;
@esui-type-h5-line-height: 1.2;
@esui-type-h6-font-size: @esui-x-small-font-size;
@esui-type-h6-line-height: 1.2;

// hr bar
@esui-type-hr-color: #ddd;

@esui-type-quote-margin: 0 1.5em 1.5em;
@esui-type-quote-foot-text-color: #999;

// table element
@esui-type-table-border-color: #ddd;
@esui-type-table-caption-text-color: #444;
@esui-type-table-caption-font-size: @esui-medium-font-size;
@esui-type-table-caption-padding: 1em 0;
@esui-type-table-cell-padding: 0.5em 1em;
@esui-type-table-cell-font-size: @esui-medium-font-size;
@esui-type-table-head-background-color: #FFF;
@esui-type-table-head-text-color: #444;
@esui-type-table-hover-line-background-color: #FAFAFA;
@esui-type-table-hover-line-text-color: #444;
@esui-type-table-striped-background-color: #EFF0F2;
@esui-type-table-striped-text-color: #444;

// html, body
// `font-size` is set in `html` element to support the `rem` unit for font-sizes
html {
    font-size: @esui-medium-font-size;
}

body {
    background: @esui-type-body-background;
    font-family:  @esui-type-body-font-family;
    font-weight:  @esui-type-body-font-weight;
    line-height: @esui-type-body-line-height;
    color: @esui-type-body-text-color;
    .esui-type-body-theme();
}

// links
a {
    .esui-make-link(
        @esui-type-link-color,
        @esui-type-link-hover-color,
        @esui-type-link-text-decoration,
        @esui-type-link-hover-text-decoration
    );
    &.@{ui-class-prefix}-link-static {
        .esui-make-link(
            @esui-type-body-text-color,
            @esui-type-body-text-color
        );
    }
    &.@{ui-class-prefix}-link-plain {
        .esui-make-link(
            @esui-type-link-color,
            @esui-type-link-hover-color
        );
    }
}

// dfn underline and cusor
abbr[title],
dfn[title] { cursor: help; }

dfn[title] {
    border-bottom: 1px dotted;
    font-style: normal;
}

// code and keyboard key
code,
kbd {
    color: @esui-type-code-text-color;
    white-space: nowrap;
    border: 1px solid @esui-type-code-border-color;
    .esui-border-radius(
        @esui-type-code-border-radius,
        @esui-type-code-border-radius
    );
    background: @esui-type-code-background-color;
    font-family: @esui-type-code-font-family;
    padding: @esui-type-code-padding;
}

// resest background color and other style when wrapped in pre
pre code {
    color: inherit;
    white-space: inherit;
    border: none;
    background: none;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: @esui-type-headings-font-family;
    font-weight: @esui-type-headings-font-weight;
    color: @esui-type-headings-color;
    margin: @esui-type-headings-margin;

    small {
        font-weight: normal;
        color: @esui-type-headings-small-color;
    }
}

h1, h2, h3 {
    small {
        font-size: 65%;
    }
}

h4, h5, h6 {
    small {
        font-size: 75%;
    }
}

h1,
.@{ui-class-prefix}-h1 {
    font-size: @esui-type-h1-font-size;
    line-height: @esui-type-h1-line-height;
}

h2,
.@{ui-class-prefix}-h2 {
    font-size: @esui-type-h2-font-size;
    line-height: @esui-type-h2-line-height;
}

h3,
.@{ui-class-prefix}-h3 {
    font-size: @esui-type-h3-font-size;
    line-height: @esui-type-h3-line-height;
}

h4,
.@{ui-class-prefix}-h4 {
    font-size: @esui-type-h4-font-size;
    line-height: @esui-type-h4-line-height;
}

h5,
.@{ui-class-prefix}-h5 {
    font-size: @esui-type-h5-font-size;
    line-height: @esui-type-h5-line-height;
}

h6,
.@{ui-class-prefix}-h6 {
    font-size: @esui-type-h6-font-size;
    line-height: @esui-type-h6-line-height;
}

// quotes
blockquote {
    font-style: italic;
    margin: @esui-type-quote-margin;
    footer {
        color: @esui-type-quote-foot-text-color;
    }
}

// description list
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}

.@{ui-class-prefix}-divider,
hr {
    border: 0;
    border-top: 1px solid @esui-type-hr-color;
    height: 0;
    overflow:hidden;
    color: @esui-type-hr-color;
}

.@{ui-class-prefix}-list-unstyled,
.@{ui-class-prefix}-list-inline {
    padding-left: 0;
    .reset-list-style();
}

// Inline turns list items into inline-block
.@{ui-class-prefix}-list-inline {
    margin-left: -0.5em;

    > li {
        display: inline-block;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

// table
.@{ui-class-prefix}-raw-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    caption {
        text-align: center;
        font-weight: bold;
    }
    td,
    th {
        border-width: 0 0 0 1px;
        margin: 0;
        // to make ths where the title is really long work
        overflow: visible; 
    }
    thead {
        text-align: left;
    }

    .esui-table-variant(
        @esui-type-table-caption-text-color,
        @esui-type-table-border-color,
        @esui-type-table-head-background-color,
        @esui-type-table-head-text-color,
        @esui-type-table-striped-background-color,
        @esui-type-table-striped-text-color,
        @esui-type-table-hover-line-background-color,
        @esui-type-table-hover-line-text-color
    );
    .esui-table-size(
        @esui-type-table-caption-padding,
        @esui-type-table-caption-font-size,
        @esui-type-table-cell-padding,
        @esui-type-table-cell-font-size
    );
}

.esui-table-variant(
    @caption-text-color,
    @border-color,
    @head-background-color,
    @head-text-color,
    @striped-background-color,
    @striped-text-color,
    @hover-line-background-color,
    @hover-line-text-color
) {
    border: 1px solid @border-color;
    caption {
        color: @caption-text-color;
    }
    td,
    th {
        border-left: 1px solid @border-color;
    }
    thead {
        background: @head-background-color;
        color: @head-text-color;
        .esui-table-thead-theme();
    }
    &.@{ui-class-prefix}-raw-table-striped {
        tr:nth-child(2n-1) td {
            background-color: @striped-background-color;
            color: @striped-text-color;
        }
    }
    &.@{ui-class-prefix}-raw-table-bordered {
        td,
        th {
            border-bottom: 1px solid @border-color;
        }
    }
    &.@{ui-class-prefix}-raw-table-horizontal {
        th,
        td {
            border-width: 0 0 1px 0;
            border-bottom: 1px solid @border-color;
        }
    }
    &.@{ui-class-prefix}-raw-table-hoverable {
        > tbody > tr:hover {
            > td,
            > th {
                background-color: @hover-line-background-color !important;
                color: @hover-line-text-color; 
            }
        }
    }
}

.esui-table-size(
    @esui-table-caption-padding,
    @esui-table-caption-font-size,
    @esui-table-cell-padding,
    @esui-table-cell-font-size
) {
    caption {
        padding: @esui-table-caption-padding;
        font-size: @esui-table-caption-font-size;
    }
    td,
    th {
        padding: @esui-table-cell-padding;
        font-size: @esui-table-cell-font-size
    }
}

.esui-make-link(@color, @hoverColor, @decoration: none, @hoverDecoration: none) {
    color: @color;
    text-decoration: @decoration;

    &:hover {
        color: @hoverColor;
        text-decoration: @hoverDecoration;
    }
}

.esui-type-body-theme() {};
.esui-table-thead-theme() {};